<h3>Video</h3>
<div style="float: left;width:30%;">
    <p style="margin-top: 0;">Video to use:<br />
        <video id="video1" controls width="270" autoplay />
          <source src="/videos/mov_bbb.mp4" type='video/mp4' />
        </video>
    </p>
    

    <canvas id="myCanvas_video" width="200px" height="200px" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<div style="float: left;padding:0% 1% 1% 1%;width:68%;">
    <textarea style="width: 100%;height: 300px;" id="code_video">
        var v=document.getElementById("video1");
        var c=document.getElementById("myCanvas_video");
        
        ctx=c.getContext('2d');
        v.addEventListener('play', function() {
            var i= window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);
        },false);
        v.addEventListener('pause',function() {
            window.clearInterval(i);
        },false);
        v.addEventListener('ended',function() {
            clearInterval(i);
        },false); 

    </textarea>
    <input type="button" value="run" onclick="run_code('#code_video')" />
</div>


<script type="text/javascript">
<!--
    $(function(){
	   run_code('#code_video');
	})
-->
</script>


